$width-all:1280px;
$bgc:#dfdfde;
$size1:14px;

.header {
  margin: 0 auto;
  width: $width-all;
  height: 134px;

  >.header-top {
    width: $width-all;
    height: 38px;
    background-color: $bgc;

    >span {
      margin-left: 158px;
      line-height: 38px;
      font-size: $size1;
    }

    >span:nth-child(2) {
      margin-left: 633px;
      margin-right: 25px;
    }

    >span:nth-child(3) {
      margin: 0;
    }
  }

  >.header-next {
    width: $width-all;
    height: 96px;
    font-size: 0;

    .header-next-img {
      margin-left: 155px;
      margin-right: 8px;
      height: 100%;
      width: 92px;
      display: inline-block;
      vertical-align: top;

      >img {
        padding-top: 5px;
      }
    }

    >.header-next-text {
      margin-right: 108px;
      height: 100%;
      width: 180px;
      display: inline-block;
      vertical-align: top;
      font-size: 24px;

      >p {
        padding-top: 32px;
        padding-bottom: 2px;
      }

      >p:last-child {
        font-size: 12px;
        padding-top: 0;
      }
    }

    >.header-next-list {
      display: inline-block;
      height: 96px;
      font-size: 13px;

      >ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        text-align: center;
        height: 100%;


        li {
          position: relative;
          overflow: hidden;

          a{
            color: #000;
          }

          p {
            padding-top: 29px;
            box-sizing: border-box;
            align-items: center;
            width: 86px;
            height: 48px;
          }

          p:last-child {
            padding-top: 0;
          }

          &::after {
            position: absolute;
            content: "";
            display: block;
            left: -100%;
            bottom: 0;
            width: 100%;
            height: 3px;
            background-color: #3c9cd3;
          }

          &:hover::after {
            left: 0;
            transition: left 0.5s ease-in;
            -webkit-transition: left 0.5s ease-in;
            -moz-transition: left 0.5s ease-in;
            -ms-transition: left 0.5s ease-in;
            -o-transition: left 0.5s ease-in;
          }

          &:hover{
            height: 100%;
            background-color: #fafaf8;
          }
        }

        // .active {
        //   position: relative;
        //   background-color: #fafaf8;
        //   overflow: hidden;
        // }

        // .active::after {
        //   position: absolute;
        //   content: "";
        //   display: block;
        //   left: -100%;
        //   bottom: 0;
        //   width: 100%;
        //   height: 3px;
        //   background-color: #3c9cd3;
        // }

        // .active:hover::after {
        //   left: 0;
        //   transition: left 1s ease-in;
        //   -webkit-transition: left 1s ease-in;
        //   -moz-transition: left 1s ease-in;
        //   -ms-transition: left 1s ease-in;
        //   -o-transition: left 1s ease-in;
        // }
      }
    }

  }

}